<template>
  <div class="">
    <!-- 顶部 -->
    <div class="top">
      <div class="ti">项目申报与执行信息管理系统门户登录</div>
    </div>
    <!-- //中间放一张图片 -->
    <div class="mid">
      <img src="../../assets/bgg.jpg" alt="" style="height:24rem ;width: 100%;">
    </div>
    <!-- //底部菜单栏 -->
    <div class="bottom">
      <div class="addr">地址:联微基地</div>
      <div class="connect"><a href="#">联系我们</a></div>
    </div>
    <!-- 表单 -->
    <div class="form">
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名" style="margin-top: 2rem;">
          <el-input v-model="form.username" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" style="width: 200px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button>注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { reactive, onBeforeMount, onMounted } from 'vue'
import router from '@/router/index.js'

//创建响应式对象
const form = reactive({
  username: '',
  password: ''
})

const onSubmit = () => {
  console.log(form.username + form.password)
  router.push('/index/home')
}
onBeforeMount(() => {
  //组件挂载页面之前执行
})
onMounted(() => {
  //组件挂载到页面之后执行
})

</script>
<style lang='scss' scoped>
.top {
  background-color: rgb(233, 21, 21);
  height: 10rem;

  .ti {
    text-align: center;
    font-size: 2rem;
    color: aliceblue;
    padding-top: 3rem;
  }
}

.mid {
  height: 24rem;
}

.bottom {
  background-color: rgb(233, 21, 21);
  height: 5.9rem;

  .connect {
    position: absolute;
    right: 2rem;
    bottom: 1rem;
  }

  .addr {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
  }
}

.form {
  position: absolute;
  left: 35%;
  top: 30%;
  border: solid 2px whitesmoke;
  border-radius: 4px;
  background-color: aliceblue;
  width: 400px;
}
</style>
